<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
    <meta charset="utf-8">
    <title>文章列表</title>
</head>

<body>
    <div class="wrap">
        <!-- 头部 -->
        <c:import url="../head.jsp"></c:import>
        <!-- 左侧菜单和主体内容 -->
        <div class="grid-1-7" style="flex: 1;margin:0;">
            <!-- 左侧菜单 -->
            <c:import url="../menu.jsp"></c:import>
            <!-- 面包屑导航和主体内容 -->
            <div class="content">
                <!--面包屑导航-->
                <div class="content-header">
                    <div class="breadcrumb">
                        <span>文章管理</span>
                        <span class="divider">/</span>
                        <span class="active">文章分类</span>
                    </div>
                </div>
                <!--全部主体内容-->
                <div class="list-content">
                    <!--块元素-->
                    <div class="block">
                        <!--页面有多个表格时，可以用于标识表格-->
                        <h2>文章列表</h2>
                        <!--右上角的返回按钮-->
                        <a href="javascript:history.back();">
                            <button class="button wathet" style="position: absolute;right: 20px;top: 16px;"><span class="icon-arrow_back"></span> 返回</button>
                        </a>

                        <!--正文内容-->
                        <div class="main-0">


                            <div style="text-align: right;">
                                <%--分类下拉框--%>
                                <select  id="type_id" class="no-shadow">
                                    <option value="">请选择</option>
                                    <%--遍历--%>
                                 <c:forEach items="${typeList}" var="typeInfo" varStatus="status" >
                                    <%-- <option value="${typeInfo.id}">${typeInfo.name}</option>--%>

                                     <c:choose>
                                            <c:when test="${typeInfo.id == typeId}">
                                                <option value="${typeInfo.id}" selected>${typeInfo.name}</option>
                                            </c:when>
                                            <c:otherwise>
                                                <option value="${typeInfo.id}">${typeInfo.name}</option>
                                            </c:otherwise>
                                        </c:choose>
                                 </c:forEach>
                                    <%--<c:forEach items="${typeList}" var="typeInfo" varStatus="status">
                                        <option value="${typeInfo.id}"
                                                <c:if test="${article.typeId==typeId}"></c:if>selected>${typeInfo.name}</option>
                                    </c:forEach>--%>
                                </select>
                                    <%--日期--%>
                                    <!--不一定是input，可以使用div或span等其他元素-->
                                    <input type="text" id="date1" class="date" style="width: 200px;" value="" readonly/>
                                    <%--标题检索--%>
                                    <input type="text" class="text" id="keyWord"  placeholder="检索文章标题"/>
                                    <button class="button blue" onclick="search()"><span class="icon-search"></span></button>

                            </div>


                            <!--表格上方的操作元素，添加、删除等-->
                            <div class="operation-wrap">
                                <div class="buttons-wrap">
                                    <button id="add" class="button blue"><span class="icon-plus"></span><a href="edit.action">添加</a> </button>
                                    <button id="save" class="button green"><span class="icon-check"></span> 保存</button>
                                </div>
                            </div>
                            <table id="table" class="table color2">
                                <thead>
                                <tr>
                                    <th style="width: 20px;"><input type="checkbox" class="fill listen-1"/> </th>
                                    <th style="width: 60px;">序号</th>
                                    <th >分类</th>
                                    <th >文章标题</th>
                                    <th >撰写日期</th>
                                    <th >阅读量</th>
                                    <th >编辑</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <c:choose>
                                        <c:when test="${fn:length(pageInfo.list)== 0}">

                                            <tr>
                                                <td colspan="6"  style="text-align: center;">暂无记录</td>
                                            </tr>
                                        </c:when>
                                        <c:otherwise>

                                            <%--遍历--%>
                                            <c:forEach items="${pageInfo.list}" var="entity" varStatus="status" >
                                                <tr>
                                                    <td><input type="checkbox" class="fill listen-1-2" name="id" value="${entity.id}"/> </td>
                                                    <td>${status.index+1}</td>
                                                    <td>${entity.name}</td><%--就是分类的名字--%>
                                                    <td>${entity.title}</td>
                                                    <td>${entity.updateTime}</td>
                                                    <td>${entity.viewCount}</td>
                                                    <td>
                                                        <a href="edit.action?id=${entity.id}">
                                                            <button class="button wathet"><span class="icon-edit"></span> 编辑</button>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </c:forEach>
                                        </c:otherwise>
                                    </c:choose>

                                </tbody>
                            </table>

                            <%--分页--%>
                            <div class="page">
                                <ul id="page" class="pagination"></ul>
                            </div>

                            <div class = "block no-shadow">
                                <%--banner用来修饰元素名称--%>
                                <div class = "banner">
                                    <p class="tab fixed">批量操作<span class = "hint">Bach Option</span></p>
                                </div>
                                <%--正文内容--%>
                                <div class ="main" style="margin-bottom: 200px;">
                                    <lable zoom="1.2"><input type="radio" class="fill" name="radio2" value="move"/>批量移动到分类</lable>
                                    <select  id="type_id2" class="no-shadow">
                                        <option value="">请选择</option>
                                        <%--遍历--%>
                                        <c:forEach items="${typeList}" var="typeInfo" varStatus="status" >
                                          <option value="${typeInfo.id}">${typeInfo.name}</option>
                                        </c:forEach>
                                    </select>
                                    </br>
                                    <lable zoom="1.2"> <input type="radio" class="fill" name="radio2" value="recycle"/>批量删除</lable>
                                    </br>
                                    <button id="submit" class = "button green" style="margin-bottom: 20px;"><span class="icon-check"></span>提交</button></div>
                                 </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>


    /*下拉选*/
    javaex.select({
        id : "type_id",
        isSearch:false

    });
    /*日期*/
    var startDate = "";
    var endDate = "";
        javaex.date({
            id: "date1",		// 承载日期组件的id
            monthNum: 2,		// 1代表选择单日日期 2 表示范围的日期
            startDate: "${startDate}",	// 选择的日期
            endDate: "${endDate}",
            alignment: "right",
            // 重新选择日期之后返回一个时间对象
            callback: function (rtn) {
                /*alert(rtn.startDate + rtn.endDate);*/
                startDate = rtn.startDate;
                endDate = rtn.endDate;
            }
        });
    /*分页*/
    var currentPage = "${pageInfo.pageNum}";
    var pageCount = "${pageInfo.pages}";
    javaex.page({
        id : "page",
        pageCount : pageCount,	// 总页数
        currentPage : currentPage,// 默认选中第几页
        position : "center",
        // 返回当前选中的页数
        callback:function(rtn) {
            /*alert("当前选中的页数：" + rtn.pageNum);*/
            search(rtn.pageNum);
        }
    });
    function search(pageNum) {
        if (pageNum == undefined) {
            pageNum =1;
        }
        var typeId = $("#type_id").val();
        var keyWord = $("#keyWord").val();
        window.location.href = "list.action?pageNum="+pageNum
                                +"&typeId="+typeId
                                +"&startDate="+ startDate
                                +"&endDate="+ endDate
                                +"&keyWord="+keyWord;
    }

    /*提交按钮*/
    $("#submit").click(function () {

        var idArr = new Array();
        $(':checkbox[name="id"]:checked').each(function () {
            idArr.push($(this).val());
        });
        console.log(idArr);
        if (idArr.length == 0) {
            javaex.optTip({
                content: "至少选择一项",
                type: "error"
            });
            return ;
        }

        //判断是哪个单选框操作
        var opt = $(':radio[name="radio2"]:checked').val();
        if (opt == "move") {
            /*测试控制台打印一下*/
          /*  console.log("move");*/
            //获取目标的id
            var typeId = $("#type_id2").val();
            console.log(typeId);
            //发送ajax请求

            $.ajax({
                url : "updateByType.json",
                type : "POST",
                dataType : "json",
                traditional : "true",
                async : "false",
                data : {
                    "idArr" : idArr,
                    "typeId" : typeId
                },
                success : function(rtn) {
                    //console.log(rtn);
                    if (rtn.code == "000000") {
                        javaex.optTip({
                            content:rtn.message,

                        });
                        //延迟加载
                        setTimeout(function () {
                            //跳转页面
                            window.location.href = "${pageContext.request.contextPath}/article/list.action";
                        },2000);
                    }else {
                        javaex.optTip({
                            content:rtn.message,
                            type:"error"
                        },2000);

                    }
                }
            });

        }else if (opt == "recycle") {
           /* console.log("recycle");*/
            //发送ajax请求
            $.ajax({
                url : "updateByStatus.json",
                type : "POST",
                dataType : "json",
                traditional : "true",
                async : "false",
                data : {
                    "idArr" : idArr
                },
                success : function(rtn) {
                    //console.log(rtn);
                    if (rtn.code == "000000") {
                        javaex.optTip({
                            content:rtn.message,

                        });
                        //延迟加载
                        setTimeout(function () {
                            //跳转页面
                            window.location.href = "${pageContext.request.contextPath}/article/list.action";
                        },2000);
                    }else {
                        javaex.optTip({
                            content:rtn.message,
                            type:"error"
                        },2000);

                    }
                }
            });

        }
    });


</script>
</html>